<template>
	<view class="container">
		<!-- 搜索区域 -->
		<u-search v-model="searchKeyword" placeholder="姓名/手机号" :showAction="false" @search="loadCustomers"></u-search>
		<!-- 客户列表 -->
		<scroll-view scroll-y class="list-container" @scrolltolower="loadMore">
			<u-empty v-if="customers.length === 0 && loadStatus=='nomore'" mode="list"></u-empty>
			<view v-for="item in customers" :key="item._id" class="customers-container">
				<div class="customer-card">
					<div class="card-header" @click="viewDetail(item)">
						<div class="header-flex-left">
							<div class="customer-name">{{item.name}}</div>
							 <u-tag :text="formatType(item.type)" plain shape="circle" size="mini"></u-tag>
						</div>
						<div class="customer-status">{{formatStatus(item.status)}}</div>
					</div>
					<div class="card-body">
						<div class="customer-info">
							<div class="info-row">
								<div class="info-value phone"><u-icon name="phone-fill" color="#2979ff" @click="openPoup(item)"></u-icon>1845345***</div>
							</div>
							<div class="customer-agent">
								<div class="agent-avatar" v-if="item.is_public">公</div>
								<span>业务员：{{item.creator}}</span>
							</div>
							<uni-icons :type="favorites.includes(item._id) ? 'star-filled' : 'star'" class="star-menu" color="#2979ff" @click="favorite(item)"></uni-icons>
							<uni-icons type="more" class="more-menu" @click="openPoup(item)"></uni-icons>
						</div>
					</div>
				</div>
			</view>
			<u-loadmore :status="loadStatus" />
		</scroll-view>
		<u-action-sheet :actions="list" :show="show" @close="show=false"  @select="selectClick"></u-action-sheet>
		<!-- 添加按钮 -->
		<u-button type="primary" icon="plus" shape="circle" class="add-btn" @click="addCustomer"></u-button>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const Odb=uniCloud.importObject('mydb-customer')
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			return {
				searchKeyword: '',
				currentStatus: 0,
				customers: [],
				favorites:[],
				list: [
					{
						name:'补充信息',
						color:'#4e6ef2',
					},
					{
						name:'基本信息',
						color:'#41dd6c',
					},
					{
						name:'写跟进',
						color:'#87c7ff',
					},
					{
						name:'成交维护',
						color:'#ffebae',
					},
					{
						name: '添加提醒',
						color:'#ffaa7f',
					}
				],
				show: false,
				page: 1,
				limit: 10,
				currentCustomer:null,
				loadStatus: 'loadmore'
			}
		},
		computed: {
			userInfo() {
				return store.userInfo
			}
		},
		onLoad() {
			this.page = 1
			this.loadCustomers()
		},
		methods: {
			formatStatus(status) {
				const map = {
					potential: '潜在',
					to_follow: '待跟进',
					intention: '意向',
					visit: '上门',
					deal: '成交'
				}
				return map[status] || status
			},

			formatType(type) {
				const map = {
					credit: '信贷',
					mortgage: '抵押',
					house_purchase: '购房'
				}
				return map[type] || type
			},

			getStatusType(status) {
				const typeMap = {
					potential: 'info',
					to_follow: 'warning',
					intention: 'primary',
					visit: 'success',
					deal: 'success'
				}
				return typeMap[status] || 'info'
			},

			formatDate(timestamp) {
				if (!timestamp) return '-'
				return this.$u.timeFormat(timestamp, 'yyyy-mm-dd hh:MM')
			},

			async loadCustomers() {
				this.loadStatus = 'loading'
				let where = {}
				// 状态筛选
				if (this.currentStatus > 0) {
					const statusMap = ['potential', 'to_follow', 'intention', 'visit', 'deal']
					where.status = statusMap[this.currentStatus - 1]
				}
				// 搜索条件
				if (this.searchKeyword) {
					where.$or = [{
							name: new RegExp(this.searchKeyword, 'i')
						},
						{
							phone: new RegExp(this.searchKeyword, 'i')
						}
					]
				}	
				Odb.getIndexCustomer({...where,page:this.page,limit:this.limit}).then((res)=>{
					console.log('getIndexCustomer',res)
					if(res.status){
						this.customers=res.data
						this.favorites=res.favorites.map((item)=>item.customer_id)
						this.loadStatus = this.customers.length < this.limit ? 'nomore' : 'loadmore'
					}else{
						 uni.showToast({ title: '获取失败' ,icon:"error"})
					}
				}).catch(()=>{
					this.customers=[]
					this.loadStatus ='nomore'
				})
			},
			async loadMore() {
				if (this.loadStatus === 'nomore') return
				this.page++
				this.loadStatus = 'loading'
				this.loadCustomers()
			},
			openPoup(customer) {
				this.currentCustomer=customer
				this.show=true
			},
			favorite(customer) {
				Odb.favoriteCustomer({...customer}).then((res)=>{
					console.log('favoriteCustomer',res)
					if(res.status){
						uni.showToast({ title: '收藏成功' ,icon:"none"})
					}else{
						uni.showToast({ title: res.errMsg ,icon:"none"})
					}
				}).catch(()=>{
					uni.showToast({ title: '操作失败' ,icon:"none"})
				})
			},
			selectClick({name}){
				if(name=='写跟进'){
					uni.navigateTo({
						url: '/pages/follow/edit?customerId='+this.currentCustomer._id
					})
				}else if(name=='基本信息'){
					uni.navigateTo({
						url: '/pages/customer/edit?id='+this.currentCustomer._id
					})
				}else if(name=='补充信息'){
					uni.navigateTo({
						url: '/pages/customer/more?id='+this.currentCustomer._id
					})
				}else if(name=='成交维护'){
					uni.navigateTo({
						url: '/pages/customer/deal?id='+this.currentCustomer._id
					})
				}else{
					uni.navigateTo({
						url: '/pages/customer/detail?id='+this.currentCustomer._id
					})
				}
			},
			viewDetail(item) {
				uni.navigateTo({
					url: '/pages/customer/detail?id='+item._id
				})
			},
			addCustomer() {
				uni.navigateTo({
					url: '/pages/customer/edit',
					events: {
					    refresh: (data)=> {
							this.page = 1
							this.loadCustomers()
					    }
					}
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.loadCustomers()
		},
		onReachBottom() {
			this.loadMore()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f8f9fb;
		color: #333;
		padding-bottom: 40px;
		position: relative;
	}

	.list-container {
		height: calc(100vh - 300rpx);
	}

	/* 客户卡片 */
	.customers-container {
		padding: 15px 0;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.customer-card {
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		padding: 15px;
		position: relative;
		overflow: hidden;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}
	
	.customer-name {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		margin-right: 5px;
	}
	.customer-status {
		font-size: 12px;
		font-weight: 600;
		padding: 4px 10px;
		border-radius: 20px;
		color: #fff;
		background-color: #2979ff;
	}
	.header-flex-left{
		display: flex;
	}
	.card-body {
		margin-bottom: 12px;
	}

	.customer-info {
		display: flex;
		flex-direction: column;
		gap: 8px;
		position: relative;
	}

	.info-row {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.info-label {
		color: #666;
		min-width: 60px;
	}

	.info-value {
		color: #333;
		flex: 1;
		display: flex;
		align-items: center;
	}
	.phone{
		color: #2979ff;
	}
	.customer-agent {
		display: flex;
		align-items: center;
		gap: 5px;
		font-size: 14px;
		color: #333;
	}

	.agent-avatar {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #2979ff;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	.add-btn {
		position: fixed;
		bottom: 150rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
	}
	.more-menu{
		position: absolute;
		right: 10px;
		bottom: 5px;
	}
	.star-menu{
		position: absolute;
		right: 40px;
		bottom: 5px;
	}
</style>